<style lang="scss">
@import '../static/common/variable.scss';

.collect {
    padding: 10px 5px;
    min-height: 1000px;
    background-color: #f0f0f0;
    ul {
        li {
            font-size: 16px;
            margin-bottom: 10px;
            a {
                display: block;
                color: #000;
                text-decoration: none;
                background-color: #fff;
                padding: 10px 10px;
                border-radius: 5px;
            }
            .box {
                width: 100%;
                display: flex;
                min-height: 80px;
                .left {
                    width: calc(100% - 100px);
                    position: relative;
                    h4 {
                        margin-bottom: 6px;
                        width: 100%;
                        // 1.单行文本超出转换为省略号；
                        // white-space:nowrap;//不换行
                        // overflow:hidden;//超出隐藏
                        // text-overflow:ellipsis;//超出文本省略号

                        // 2.多行文本超出转换为省略号；
                        display: -webkit-box;//
                        overflow: hidden;//超出部分隐藏
                        -webkit-box-orient: vertical;
                        line-clamp: 2;
                        -webkit-line-clamp: 2;//行数
                    }
                    .bot {
                        width: 100%;
                        font-size: 15px;
                        color: #666;
                        position: absolute;
                        bottom: 0;
                        left: 0;

                        button {
                            margin-top: 10px;
                            background-color: transparent;
                        }
                    }
                }
                .right {
                    width: 100px;
                    .imgbox {
                        width: 100px;
                        height: 100px;
                        text-align: center;
                        background-color: red;
                        overflow: hidden;
                        img {
                            // width: 100%;
                            display: inline-block;
                            height: 100%;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
}
</style>
<template>
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="我的收藏" sub-title="" @back="jumpTo" />
    <div class="collect">
       
            <ul v-if="data.length != 0">
                <li v-for="item in data">
                    <RouterLink :to="{path: '/detail', query:{id: item.id,article_id: item.article_id}}">
                 <div class="box">
                    <div class="left">
                        <h4>{{ item.article_title }}</h4>
                        <div class="bot">
                            <p>{{ item.classify_text }}</p>
                            <p>{{ formatime(item.collect_create_time) }}</p>
                            <p><button @click.stop.prevent="removeCollect(item.collect_id)">取消收藏</button></p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="imgbox">
                            <img :src="item.article_src" alt="">
                        </div>
                    </div>
                 </div>
                </RouterLink> 
                </li>
            </ul>
            <div v-else>
                <p style="text-align: center; padding: 30px 0; font-size: 18px;">暂无收藏~</p>
            </div>
    </div>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { removeCollectFn, collectListFn } from '../api/index';
import { message } from 'ant-design-vue';

export default {
    setup() {
        const router = useRouter();

        const jumpTo = () => {
            router.go(-1)
        }

        // 格式化时间
        const formatime = (date: Date | string | any) => {
            if (date) {
                let dt = new Date(date);
                return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
            }
            else {
                return '0000-00-00 00:00:00';
            }
        }

        interface ListItem {
            article_id: string;
            article_title: string;
            collect_create_time: string;
            collect_id: string;
            id: string | number;
            user_id: string;
            classify_text?:string;
            article_src?: string
        }

        let data = ref<ListItem[]>([])

        // 获取收藏列表
        const collectList = async ()=> {
            let token = localStorage.getItem('TOKEN')
            await collectListFn({token})
            .then(
                content=> {
                    // console.log(content)
                    let {code , result , msg} = content;
                    if(code == 200) {
                        data.value = result;
                    }
                    else {
                        message.error(msg);
                    }
                }
            )
        }
        collectList();

        // 取消收藏的方法
        const removeCollect = async (collect_id:string) => {
            let token = localStorage.getItem('TOKEN');
            if (collect_id) {
                await removeCollectFn({ collect_id, token })
                    .then(
                        content => {
                            console.log("4.0", content)
                            let { code, msg } = content;
                            if (code == 200) {
                                message.success('取消收藏成功');
                                collectList();
                            }
                            else {
                                message.error(msg)
                            }
                        }
                    )
            }

        }

        return {
            jumpTo,
            removeCollect,
            formatime,
            data 
        }
    }
}

</script>

